<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{width:600px;border: solid 1px black;margin: 10px auto;overflow: hidden;}
        .cont .item{float: left;width:200px;border: solid 1px #ccc;box-sizing: border-box;text-align: center;padding: 10px 0;}
        .cont .item p{height:40px;line-height:20px;overflow: hidden;}
        .cont .item img{width:90%;}

        .cont .item em{font-style: normal;display: block;margin: 10px auto;width:100px;height:24px;line-height:24px;text-align: center;border-radius: 4px;background: #ccc;font-size: 14px;}
    </style>
</head>
<body>
    <h2>这是商品列表页面</h2>
    <div class="cont">
    </div>
</body>
<script src="../ajax.js"></script>
<script>

    // 根据后端商品数据接口，渲染前端页面
    // http://10.11.60.96:3000/getGoods

    class GoodsList{
        constructor(){
            this.url = "http://10.11.60.96:3000/getGoods";
            this.cont = document.querySelector(".cont");
            // 1. 发起请求
            this.load();
        }
        load(){
            ajax({
                url:this.url,
                success:res=>{
                    // console.log(res);
                    // 2. 解析数据
                    this.res = JSON.parse(res).data;
                    // 3. 数据获取并解析成功后！！！！！！！
                    // 再渲染页面
                    this.render();
                }
            })
            // 注意：如果在此处执行render，在render内拿不到请求成功后的数据，因为ajax是异步的程序
            // this.render();
        }
        render(){
            // console.log(this.res);
            // 根据请求到的数据拼接页面结构字符串
            let str = "";
            this.res.forEach(val=>{
                str += `<div class="item" goodsid="${val.id}">
                            <a href="##">
                                <img src="${val.src}" alt="">
                                <p>${val.name}</p>
                                <span>${val.price}</span>
                            </a>
                            <em>加入购物车</em>
                        </div>`
            })
            // 将拼接好的页面结构字符串设置到指定容器
            this.cont.innerHTML = str;
        }
    }

    new GoodsList();

    // 异步
    // let a;
    // setTimeout(()=>{
    //     a = 20;
    // }, 0)
    // console.log(a);









    
</script>
</html>